<template>
  <q-page>
    <q-card class="q-ma-sm">
      <q-card-title>
        项目列表
      </q-card-title>
      <q-card-main>
        <div class="row">
          <div class="col-xs-12 col-sm-4 col-md-2">
            <q-select class="q-ma-sm" float-label="环境" :clearable="true"
                      separator v-model="env.value" :options="env.items"/>
          </div>
        </div>
      </q-card-main>
    </q-card>
    <q-card class="q-ma-sm">
      <q-card-main>
        <q-table grid :data="tableData" :columns="columns" :pagination.sync="serverPagination" row-key="name"
                 :rows-per-page-options="rowsPerPageOptions" ref="table" @request="request" :loading="loading"
                 :visible-columns="visibleColumns">
          <template slot="top-left" slot-scope="props">
            <q-btn color="primary" icon="search" class="float-right q-mr-sm" @click.native="$store.dispatch('listPubProject/loadTable')"></q-btn>
            <q-table-columns color="secondary" class="q-mr-sm" v-model="visibleColumns" :columns="columns"/>
            <q-btn flat round dense :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'" @click="props.toggleFullscreen"/>
          </template>
          <template slot="top-right" slot-scope="props">
            <q-search @input="request(props)" :debounce="600" clearable v-model="search" placeholder="name,name_en" style="width:330px;"/>
          </template>
          <div slot="item" slot-scope="props" class="q-pa-xs col-xs-12 col-md-4 col-sm-6 col-lg-3 transition-generic">
            <q-card class="transition-generic cursor-pointer">
              <div style="padding:10px;font-weight:bold;">
                {{ props.row.name }}
              </div>
              <q-card-separator />
              <q-card-main class="q-pa-none">
                <q-list no-border>
                  <q-item v-for="col in props.cols" :key="col.id" style="min-height: 30px;">
                    <q-item-main>
                      <div class="toufu">{{ col.label }}</div>
                    </q-item-main>
                    <q-item-side right>
                      <div class="toufu">{{ col.value }}</div>
                    </q-item-side>
                  </q-item>
                </q-list>
              </q-card-main>
              <q-card-separator />
              <q-card-actions>
                <q-btn label="自动构建" color="primary" v-if="props.row.status !== 'Accept'"
                       @click.native="openBuild({projectId: props.row.id, prjName: props.row.name})"></q-btn>
                <q-btn label="私有云发布" color="secondary"
                       @click.native="openPub({projectId: props.row.id, prjName: props.row.name})"></q-btn>
              </q-card-actions>
            </q-card>
          </div>
        </q-table>
      </q-card-main>
    </q-card>
  </q-page>
</template>

<script>
import listPubProjectModule from '../../store/listPubProject'
export default {
  preFetch ({ store }) {
    store.registerModule('listPubProject', listPubProjectModule)
    Promise.all([
      store.dispatch('listPubProject/loadFilters'),
      store.dispatch('listPubProject/loadHeaders'),
      store.dispatch('listPubProject/loadTable')])
      .then((result) => {
      }).catch((error) => {
        console.log(error)
      })
  },
  name: 'ListPubProject',
  data: function () {
    return this.$store.state.listPubProject
  },
  methods: {
    request (props) {
      this.serverPagination = props.pagination
      this.$store.dispatch('listPubProject/loadTable')
    },
    openBuild (props) {
      this.$router.push({name: 'listbuild', params: props})
    },
    openPub (props) {
      this.$router.push({name: 'listpublish', params: props})
    }
  },
  beforeDestroy () {
    this.$store.unregisterModule('listPubProject')
  }
}
</script>

<style>
</style>
